<template>
  <div :id="id" :style="style"></div>
</template>
<script>
export default {
  name: 'Chart',
  data () {
    return {
      // echarts实例
      chart: ''
    }
  },
  props: {
    // 父组件需要传递的参数：id，width，height，option
    id: {
      type: String
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    option: {
      type: Object,
      // Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
      // 使用闭包保证一个vue实例拥有自己的一份props
      default () {
        return {
          tooltip: {
            // 触发鼠标经过 弹窗
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              barWidth: '40', // 柱形图宽度
              itemStyle: {
                normal: {
                  color: 'pink', // 背景色
                  label: {
                    // 在柱形图上显示具体数据
                    show: true,
                    position: 'top', // 所在的位置
                    textStyle: {
                      // 数据展示的样式
                      fontSize: '20',
                      fontWeight: 'bold',
                      color: 'skyblue'
                    }
                  }
                }
              }
            }
          ]
        }
      }
    }
  },
  computed: {
    style () {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.chart = this.$echarts.init(document.getElementById(this.id), 'light')
      this.chart.setOption(this.option)
      window.addEventListener('resize', this.chart.resize)
    }
  },
  watch: {
    option: {
      handler (newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(newVal)
          } else {
            this.chart.setOption(oldVal)
          }
        } else {
          this.init()
        }
      },
      deep: true // 对象内部属性的监听，关键。
    }
  }
}
</script>
